<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>专题管理</title>
    <script type="text/javascript">
        var typeStr = '5';

        var selectLocId;
        var selectCityId;


        function formatterImg(value) {
            if (value != null) {
                return '<img height="25px" src="' + value + '" alt="" />';
            } else {
                return '';
            }

        }
        function reloadSpecialDataGrid() {
            console.log("reload");
            $('#specialArticleDataGrid').datagrid('reload');
        }
        function reloadLocDataGrid() {
            console.log("Loc--reload");
            $('#locDataGrid').datagrid('reload');
        }

        var cityTreeGrid;
        var locDataGrid;
        var specialArticleDataGrid;
        $(function () {

            $('#autocomplete-ajax-article-search').autocomplete({
                serviceUrl: '${path}/article/autoCompleteData.do',
                onSelect: function(suggestion) {
                    $('#autocomplete-article-search').val(suggestion.data);
                },
                onHint: function (hint) {
                    $('#autocomplete-ajax-x-article-search').val(hint);
                }
            });

            var treeRowId;
            cityTreeGrid = $('#cityTreeGrid').treegrid({
                url: '${path }/areaInfo/cityTreeGrid.do',
                idField: 'id',
                treeField: 'name',
                parentField: 'parentId',
                fit: true,
                fitColumns: false,
                border: false,

                columns: [[{
                    field: 'name',
                    title: '区域名',
                    width: 150
                }]],
                onClickRow: function (node) {//运用单击事件实现一行的编辑结束，在该事件触发前会先执行onAfterEdit事件
                    console.log("node:" + node.id);

                    selectCityId = node.id;
                    $('#specialArticleDataGrid').datagrid('clearSelections');
                    specialArticleSearch();

                },
                onLoadSuccess: function (node, data) {
                    console.log("data[0].id" + data[0].id);
                    loadLocDataGrid();
                }
            });
        });

        function loadLocDataGrid(id) {
            if (id == undefined) {
                id = '';
            }
            console.log("--loadLocDataGrid--id:" + id);
            locDataGrid = $('#locDataGrid').datagrid({
                url: '${path }/special/locDataGrid.do?cityId=' + id +'&typeValue='+typeStr,
                striped: true,
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                idField: 'id',
                pageSize: 20,
                pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
                frozenColumns: [[{
                    width: '40',
                    title: 'id',
                    field: 'id',
                    sortable: true
                }, {
                    width: '140',
                    title: '位置名',
                    field: 'name'
                }, {
                    width: '80',
                    title: '平台',
                    field: 'platform',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return '手机WAP';
                        } else if (value == 1) {
                            return 'PC';
                        } else {
                            return 'APP'
                        }
                    }
                }, {
                    width: '80',
                    title: '分类',
                    field: 'type',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return '轮播图';
                        } else if (value == 1) {
                            return '分类';
                        } else {
                            return '专题'
                        }
                    }
                }, {
                    width: '50',
                    title: '排序',
                    field: 'ord'
                }]],
                onClickRow: function (index, row) {
                    console.log(row.id);
//                    loadSpecialDataGrid(row.id)
                    selectLocId = row.id+"_"+row.type;
                    $('#specialArticleDataGrid').datagrid('clearSelections');
                    specialArticleSearch();
                },
                onLoadSuccess: function () {
                    var rows = $("#locDataGrid").datagrid("getRows");
                    console.log(rows[0].id);
                    loadSpecialDataGrid();
                }
            });
        }

        function loadSpecialDataGrid(id) {
            if (id == undefined) {
                id = '';
            }
            console.log("--loadSpecialDataGrid--id:" + id);
            specialArticleDataGrid = $('#specialArticleDataGrid').datagrid({
                url: '${path }/special/specialArticleDataGrid.do?specialId=' + id,
                striped: true,
                rownumbers: true,
                pagination: true,
                singleSelect: true,
                idField: 'id',
                sortName: 'id',
                sortOrder: 'asc',
                pageSize: 20,
                pageList: [10, 20, 30, 40, 50, 100, 200, 300, 400, 500],
                frozenColumns: [[{
                    width: '40',
                    title: 'id',
                    field: 'id',
                    sortable: true
                }, {
                    width: '150',
                    title: '专题位置',
                    field: 'lname'
                }, {
                    width: '120',
                    title: '文章名称',
                    field: 'title'
                }, {
                    width: '50',
                    title: '排序',
                    field: 'ord'
                }]]
            });
        }
        function addSpecialArticleFun() {


            var select = $("#cityTreeGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请先选择一个城市！", "info");
                return;
            }
            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请先选择一个位置！", "info");
                return;
            }

            $.modalDialog({
                title : '添加',
                width : 500,
                height : 350,
                href : '${path }/special/specialArticleAddPage.do',
                id:'specialArticleAddFormPage',
                buttons : [ {
                    text : '保存',
                    handler : function() {
                        $.modalDialog.openner_treeGrid = locDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                        var f = $.modalDialog.handler.find('#specialArticleForm');
                        f.submit();
                    }
                } ]
            });
        }
        function editSpecialArticleFun() {
            console.log("edit")
            var select = $("#specialArticleDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要修改的项！", "info");
                return;
            }
            $.modalDialog({
                title: '编辑',
                width: 500,
                height: 350,
                id: "specialArticleEditFormPage",
                href: '${path }/special/specialArticleEditPage.do?id=' + select.id,
                buttons : [ {
                    text : '保存',
                    handler : function() {
                        $.modalDialog.openner_treeGrid = locDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                        var f = $.modalDialog.handler.find('#specialArticleForm');
                        f.submit();
                    }
                } ]
            });
        }
        function deleteSpecialArticleFun() {
            var select = $("#specialArticleDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要删除的项！", "info");
                return;
            }

            $.messager.confirm('询问', '您确定要删除此分类吗?', function (b) {
                if (b) {
                    progressLoad();
                    $.post('${path }/special/specialArticleDelete.do', {'id': select.id}, function (result) {
                        if (result.success) {
                            $.messager.alert('提示', result.msg, 'info');
                            reloadSpecialDataGrid();
                            $('#specialArticleDataGrid').datagrid('clearSelections');
                        }
                        progressClose();
                    }, 'JSON');
                }
            });
        }

        function addLocFun() {
            $.modalDialog({
                title : '添加',
                width : 500,
                height : 350,
                href : '${path }/special/locAddPage.do',
                id:'locAddFormPage',
                buttons : [ {
                    text : '保存',
                    handler : function() {
                        $.modalDialog.openner_treeGrid = locDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                        var f = $.modalDialog.handler.find('#locAddForm');
                        f.submit();
                    }
                } ]
            });
        }
        function editLocFun() {
            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要编辑的项！", "info");
                return;
            }
            $.modalDialog({
                title : '编辑',
                width : 500,
                height : 350,
                id:'locEditFormPage',
                href : '${path }/special/locEditPage.do?id='+select.id,
                buttons : [ {
                    text : '保存',
                    handler : function() {
                        $.modalDialog.openner_treeGrid = locDataGrid;//因为添加成功之后，需要刷新这个treeGrid，所以先预定义好
                        var f =$.modalDialog.handler.find('#locEditForm');
                        f.submit();
                    }
                } ]
            });
        }

        function deleteLocFun() {
            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                $.messager.alert("提示", "请选择要删除的项！", "info");
                return;
            }

            $.messager.confirm('询问', '您确定要删除此分类吗?', function (b) {
                if (b) {
                    progressLoad();
                    $.post('${path }/special/locDelete.do', {'id': select.id}, function (result) {
                        if (result.success) {
                            $.messager.alert('提示', result.msg, 'info');
                            reloadLocDataGrid();
                            $('#locDataGrid').datagrid('clearSelections');

                        }
                        progressClose();
                    }, 'JSON');
                }
            });
        }

        //位置查询
        function locSearch(){

            var queryParams = {};

            queryParams.typeValue=typeStr;
            var select = $("#cityTreeGrid").datagrid("getSelected");
            if (select == null) {
                queryParams.specialCityIdSearchWord ="";
            }else{
                queryParams.specialCityIdSearchWord =select.id;
            }
            queryParams.locPlatformSearchWord =$("#locPlatformSearchWord").combobox('getValue');
            queryParams.locTypeSearchWord =typeStr;
            queryParams.locNameSearchWord =$("#locNameSearchWord").val();
            var options = $("#locDataGrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#locDataGrid").datagrid('options').url = "${path }/special/locDataGrid.do";
            $("#locDataGrid").datagrid('options').queryParams = queryParams;
            $("#locDataGrid").datagrid('reload');
        }
        function resetLocSearch() {

            $("#locPlatformSearchWord").combobox("setValue","");
            $("#locNameSearchWord").val("");
        }

        //专题查询
        function specialArticleSearch(){

            var queryParams = {};

            var select = $("#cityTreeGrid").datagrid("getSelected");
            if (select == null) {
                queryParams.specialCityIdSearchWord ="";
            }else{
                queryParams.specialCityIdSearchWord =select.id;
            }


            var select = $("#locDataGrid").datagrid("getSelected");
            if (select == null) {
                queryParams.specialLocIdSearchWord ="";
            }else{
                queryParams.specialLocIdSearchWord =select.id;
            }
            queryParams.articleIdSearchWord = $("#autocomplete-article-search").val();
            queryParams.articleNameSearchWord =$("#autocomplete-ajax-article-search").val();
            var options = $("#specialArticleDataGrid").datagrid('getPager').data("pagination").options;
            options.pageNumber = 1;
            //重新加载
            $("#specialArticleDataGrid").datagrid('options').url = "${path }/special/specialArticleDataGrid.do";
            $("#specialArticleDataGrid").datagrid('options').queryParams = queryParams;
            $("#specialArticleDataGrid").datagrid('reload');
        }
        function resetSpecialArticleSearch() {

            $("#autocomplete-article-search").val("");
            $("#autocomplete-ajax-article-search").val("");
        }


    </script>
</head>
<body>
<div class="easyui-layout" fit="true">
    <!--west分类列表start-->
    <div data-options="region:'west',split:true,border:false" title="城市列表" style="width:15%;">

        <table id="cityTreeGrid"></table>

    </div>

    <div data-options="region:'center',split:true,border:false" title="">
        <div class="easyui-layout" data-options="fit:true">

            <div data-options="region:'west',split:true,border:false" title="位置列表" style="width:45%;">
                <table id="locDataGrid">

                    平台:<select id="locPlatformSearchWord" name="locPlatformSearchWord" class="easyui-combobox" data-options="width:90,editable:false,panelHeight:'auto'">
                            <option value="">全部</option>
                            <option value="0">手机WAP</option>
                            <option value="1">PC</option>
                            <option value="2">APP</option>
                        </select>

                    位置:<input type="text" id="locNameSearchWord" name="locNameSearchWord"/>

                    <div style="position: relative;display: inline;margin-left: 2px">
                        <input type="button" class="easyui-linkbutton " value="重置" onclick="resetLocSearch();"/>
                        &nbsp;
                        <input type="button" class="easyui-linkbutton" value="搜索" onclick="locSearch();"/>
                    </div>
                </table>
            </div>

            <div data-options="region:'center',split:true,border:false" title="文章列表">
                <table id="specialArticleDataGrid">

                            <shiro:hasPermission name="/special/specialArticleAddPage.do">
                                <a onclick="addSpecialArticleFun();" href="javascript:void(0);" class="easyui-linkbutton"
                                   data-options="plain:true,iconCls:'fi-plus icon-green'">添加</a>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="/special/specialArticleEditPage.do">
                                <a onclick="editSpecialArticleFun();" href="javascript:void(0);" class="easyui-linkbutton"
                                   data-options="plain:true,iconCls:'fi-pencil icon-green'">编辑</a>
                            </shiro:hasPermission>
                            <shiro:hasPermission name="/special/specialArticleDelete.do">
                                <a onclick="deleteSpecialArticleFun();" href="javascript:void(0);" class="easyui-linkbutton"
                                   data-options="plain:true,iconCls:'fi-x icon-green'">删除</a>
                            </shiro:hasPermission>



                    文章名称:
                    <div style="position: relative;display: inline;" >
                        <input type="hidden" name="autocomplete-article-search" id="autocomplete-article-search" value="" />
                        <input type="text" id="autocomplete-ajax-article-search" style="position: absolute; z-index: 2; background: transparent;" value=""/>
                        <input type="text" id="autocomplete-ajax-x-article-search" disabled="disabled" style="color: #CCC; position: absolute; background: transparent; z-index: 1;" value=""/>
                    </div>

                    <div style="position: relative;display: inline;margin-left: 190px">
                        <input type="button" class="easyui-linkbutton " value="重置" onclick="resetSpecialArticleSearch();"/>
                        &nbsp;
                        <input type="button" class="easyui-linkbutton" value="搜索" onclick="specialArticleSearch();"/>
                    </div>
                </table>
            </div>

        </div>
    </div>

</div>
</body>
</html>
